<template>
  <el-header class="header">
    <div style="flex: 0.4; font-size: 18px">
      <span
        :class="collapseBtnClass"
        style="cursor: pointer"
        @click="changeData"
      ></span>
    </div>

    <div style="flex: 0.5">
      <span class="headerTitle"><b>高校宿舍管理系统</b></span>
    </div>

    <el-dropdown style="width: 100px; cursor: pointer; flex: 0.1" @command="handleCommand">
      <span style="padding-right: 10px">{{userName===""?"无名氏":userName}}</span>
      <i class="el-icon-arrow-down"></i>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item command="logOut"  >退出登录</el-dropdown-item>
      </el-dropdown-menu>

      
    </el-dropdown>
  </el-header>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      isCollapse: this.$store.state.HeaderData.isCollapse,
      sizeWidth: this.$store.state.HeaderData.sizeWidth,
      menuName: this.$store.state.HeaderData.menuName,
      menuNameIcon: this.$store.state.HeaderData.menuNameIcon,
      collapseBtnClass: "el-icon-s-fold",
      userName:sessionStorage.getItem("username")
    };
  },
  computed: {},
  methods: {
    handleCommand(command) {
      if(command==="logOut"){
        this.logOut();
      }
    },
    logOut(){
      console.log("登出");
      sessionStorage.removeItem('rid');
      this.$router.push({
          name:'logout'
      });
    },
    changeData() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.sizeWidth = 64;
        this.collapseBtnClass = "el-icon-s-unfold";
        this.menuName = "宿舍系统";
        this.menuNameIcon = 0;
        const HomeData = {
          isCollapse: this.isCollapse,
          sizeWidth: this.sizeWidth,
          menuName: this.menuName,
          menuNameIcon: this.menuNameIcon,
        };
        this.$store.commit("HeaderData/Collapse", HomeData);
      } else {
        this.sizeWidth = 200;
        this.collapseBtnClass = "el-icon-s-fold";
        this.menuName = "高校宿舍管理系统";
        this.menuNameIcon = 10;
        const HomeData = {
          isCollapse: this.isCollapse,
          sizeWidth: this.sizeWidth,
          menuName: this.menuName,
          menuNameIcon: this.menuNameIcon,
        };
        this.$store.commit("HeaderData/Collapse", HomeData);
      }
    },
  },
};
</script>

<style scoped>
.el-header {
  width: 100%;
  background-color: #e8edf3;
  color: #333;
  line-height: 60px;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}
/* 整体布局位置 */
.header {
  position: absolute;
  width: 100%;
  font-size: 12px;
  border-bottom: 1px solid #ccc;
  line-height: 60px;
  display: flex;
  box-shadow: 0 15px 10px -15px #2e2e2e;
  /*
    * @Author:li
    * Date: Create in 2022-09-28 15:35:36
    */
}
/* 大标题的title */
.headerTitle {
  display: inline-flex;
  font-size: 20px;
}
.MyBreadcrumb{
  float: left;
  position: absolute;
  top :80px;
}
</style>